<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <script src="/js/layui/layui.all.js" type="text/javascript"></script>
    <script src="/admin/js/token.js"></script>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">




        <div class="layui-card-body" id="body">
            <table class="layui-table" id="left-table" style="margin-left:10%;width: 30%;float: left;">
                <colgroup>
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th><input type="checkbox" class="all" /></th>
                    <th>未选角色</th>
                </tr>
                </thead>
                <tbody id="left">
                </tbody>
            </table>
            <div id="center" style="width: 10%;float:left;margin-left: 8%;">
            <button style="height:28px" class="layui-icon layui-icon-left layui-btn" id="l-btn"></button> <br>
            <button style="height:28px;margin-top: 3px;" class="layui-icon layui-icon-right layui-btn" id="r-btn"></button>
            </div>
            <table class="layui-table" id="right-table" style="width: 30%;margin-left: 60%">
                <colgroup>
                    <col>
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th><input type="checkbox" class="all" /></th>
                    <th>已选角色</th>
                </tr>
                </thead>
                <tbody id="right">
                </tbody>
            </table>
        </div>

    </div>
</div>



</body>


<script>
        var $ = layui.$ //由于layer弹层依赖jQuery，所以可以直接得到
            ,layer = layui.layer;
        $("#r-btn").click(function () {

            var trs = $("#left").find("tr input[type=checkbox]:checked");
            $(trs).prop("checked",false);
            for (var i = 0;i<trs.length;i++){
                var adminId = getUrlSearch('adminId');
                var roleId = $(trs[i]).parents('tr').prop('id');
                (function(i){
                $.ajax({
                    type:'post',
                    url:'http://127.0.0.1:8080/admin/role/adminRole_save',
                    async:false,
                    data:{
                        adminId:adminId,
                        roleId:roleId
                    },
                    success:function (data) {
                        if(data.code==200){
                        layer.msg('添加成功',{
                            icon:1,
                            time:1000,
                            end:function () {
                                //alert(i);
                                $(trs[i]).parents('tr').attr("adminroleid",data.data);
                                //$(trs).parents('tr').attr("adminroleid",data.data);
                                $("#right").append($(trs).parent().parent());
                                $(".all").prop("checked",false);
                                var height = $("#right-table").height();
                                var height2 = $("#left-table").height();
                                if(height>height2){
                                    $("#body").css("height",height);
                                }else{
                                    $("#body").css("height",height2);
                                }
                            }
                        })
                        }else{
                            layer.msg('添加失败',{
                                icon:2,
                                time:1000,
                                end:function () {

                                }
                            });
                        }
                    }
                });
                })(i);
            }

        });
        $("#l-btn").click(function () {

            var trs = $("#right").find("tr input[type=checkbox]:checked");
            $(trs).prop("checked",false);
            for (var i = 0;i<trs.length;i++){
                //alert($(trs[i]).parents('tr').attr('adminroleid'))
                $.ajax({
                    type:'post',
                    url:'http://127.0.0.1:8080/admin/role/adminRole_del',
                    data:{
                        adminRoleId:$(trs[i]).parents('tr').attr('adminroleid')
                    },
                    success:function (data) {
                        if(data.code==200){
                            layer.msg('删除成功',{
                                icon:1,
                                time:1000,
                                end:function () {
                                    $("#left").append($(trs).parent().parent());
                                    $(".all").prop("checked",false);
                                    var height = $("#right-table").height();
                                    var height2 = $("#left-table").height();
                                    if(height>height2){
                                        $("#body").css("height",height);
                                    }else{
                                        $("#body").css("height",height2);
                                    }
                                }
                            });
                        }else{
                            layer.msg('删除失败',{
                                icon:2,
                                time:1000,
                                end:function () {

                                }
                            });
                        }
                    }
                });
            }

        });
        $(".all").click(function () {
            var str = $(this).parents("thead").next().find("tr").find(".one")
            if($(this).is(':checked')==true){
            for(var i = 0;i<str.length;i++){
                $(str[i]).prop("checked",true);
            }
            }else{
                for(var i = 0;i<str.length;i++){
                    $(str[i]).prop("checked",false);
                }
            }
        });

        window.onload=function () {
            $.ajax({
                type:'post',
                url:'http://127.0.0.1:8080/admin/role/adminRole_edit',
                data:{
                    adminId:getUrlSearch('adminId')
                },
                async:false,
                success:function (data) {
                    //alert(data.data.records.length)

                    for (var i = 0; i < data.data.length; i++) {

                        setData(data,i);
                    }
                }
            });

            function setData(data,i,x) {
                var that = true;
                if (data.data[i].admin_role_id != null && data.data[i].admin_id == getUrlSearch('adminId')) {
                    $("#left").find("tr td").each(function (e) {
                        var thistext = $(this).text();
                        if(thistext == data.data[i].role_name){
                            that = false;
                        }
                    })
                    $("#right").find("tr td").each(function (e) {
                        var thistext = $(this).text();
                        if(thistext == data.data[i].role_name){
                            that = false;
                        }
                    })
                    if(that==false){
                        return;
                    }
                        right_add(data,i);

                } else {

                    $("#left").find("tr td").each(function (e) {
                        var thistext = $(this).text();
                        if(thistext == data.data[i].role_name){
                            that = false;
                        }
                    })
                    $("#right").find("tr td").each(function (e) {
                        var thistext = $(this).text();
                        if(thistext == data.data[i].role_name){
                            that = false;
                        }
                    })
                    // if(data.data[i].admin_id != getUrlSearch('adminId')&&data.data[i].admin_role_id != null){
                    //     left_add(data,i);
                    //     return;
                    // }
                    if(that==false){
                        return;
                    }
                    left_add(data, i);



                    }
                }

            function left_add(data,i) {
                $("#left").append("<tr id=" + data.data[i].role_id + " >" +
                    "                    <td><input type=\"checkbox\" class=\"one\" /></td>" +
                    "                    <td>" + data.data[i].role_name + "</td>" +
                    "                </tr>");
            }
            function right_add(data,i) {
                $("#right").append("<tr id=" + data.data[i].role_id + " adminroleid=" + data.data[i].admin_role_id + ">" +
                    "                    <td><input type=\"checkbox\"  class=\"one\" /></td>" +
                    "                    <td>" + data.data[i].role_name + "</td>" +
                    "                </tr>");

            }
            var height = $("#right-table").height();
            var height2 = $("#left-table").height();
            if(height>height2){
                $("#body").css("height",height);
            }else{
                $("#body").css("height",height2);
            }
            height = $("#body").height();
            $("#center").css("margin-top",height/2);
        }


    function getUrlSearch(name) {
        // 未传参，返回空
        if (!name) return null;
        // 查询参数：先通过search取值，如果取不到就通过hash来取
        var after = window.location.search;
        after = after.substr(1) || window.location.hash.split('?')[1];
        // 地址栏URL没有查询参数，返回空
        if (!after) return null;
        // 如果查询参数中没有"name"，返回空
        if (after.indexOf(name) === -1) return null;

        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
        // 当地址栏参数存在中文时，需要解码，不然会乱码
        var r = decodeURI(after).match(reg);
        // 如果url中"name"没有值，返回空
        if (!r) return null;

        return r[2];
    }
</script>
</html>
